<style scoped lang="less">
    @import "./index.less";
</style>
<template>
    <div  ref="htmlHeight">
        <el-container>
            <el-header>
                <el-menu class="el-menu-demo" mode="horizontal" background-color="#545c64" text-color="#fff" active-text-color="#ffd04b">
                    <div class="layout-logo">{{confData.system_name}}</div>
                    <div class="layout-nav">
                        <el-submenu index="2">
                            <template slot="title">{{adminData.username}}</template>
                            <!--<el-menu-item index="2-1">
                                <i class="el-icon-user"></i>个人中心
                            </el-menu-item>-->
                            <el-menu-item index="2-2" @click.native="signOut()">
                                <i class="el-icon-unlock"></i>退出登录
                            </el-menu-item>
                        </el-submenu>
                    </div>
                    <div class="layout-avatar">
                        <img v-if="adminData.avatar" :src="adminData.avatar" style="width:40px;height:40px;borderRadius: 20px;"/>
                    </div>
                </el-menu>
            </el-header>
            <el-container>
                <div class="layout-menu" ref="leftSider">
                    <el-aside width="200px" style="background-color: rgb(238, 241, 246)">
                        <el-menu :accordion="true" :active-name="activeName" :open-names="openNames" ref="leftMenu" :style="{height:'100%'}">
                            <el-submenu :index="key+''"  v-for="(data,key) in listData" :key="data.id" :name="data.id">
                                <template slot="title"><i :class="data.icon"></i>{{data.name}}</template>
                                <el-menu-item :index="key-key2+''"
                                              v-if="data.childs"
                                              v-for="(map,key2) in data.childs"
                                              :key="map.id"
                                              :name="map.id"
                                              @click.native="clickMenu(map.route)">
                                    {{map.name}}
                                </el-menu-item>
                            </el-submenu>
                        </el-menu>
                    </el-aside>
                </div>
                <el-main :style="{padding: '0 24px 24px'}">
                    <!-- 面包屑 -->
                    <el-breadcrumb separator="/" :style="{margin: '24px 0'}">
                        <el-breadcrumb-item :to="{ path: '/' }">首页</el-breadcrumb-item>
                        <el-breadcrumb-item v-for="item in Crumbs"  :key="item.id">
                            <a @click="clickMenu(item.menu_route)">{{item.title}}</a>
                        </el-breadcrumb-item>
                    </el-breadcrumb>
                    <!--左侧栏 和 header部分对于整个后台部分都是不变的，唯一变的就是上面3的部分，这里就通过router-view来展示所需控件-->
                    <div class="layout-menu" ref="main">
                        <Content :style="{padding: '24px', minHeight:mainHeight, background: '#fff'}">
                        <router-view class="rule-body"/>
                        </Content>
                    </div>
                </el-main>
            </el-container>
           <!-- <el-footer>Footer</el-footer>-->
        </el-container>
    </div>
</template>

<script>
    import axios from "@/axios";
    export default {
        name: "index",
        data() {
            return {
                isCollapsed: false,
                page: 1,
                pz: 10,
                // 返回菜单数据
                listData: {},
                // 管理员信息
                adminData: {},
                base: {},
                activeName: 0,
                openNames: [],
                confData: [],
                mainHeight: "520px",
                Crumbs: []
            };
        },
        mounted() {
            // 未登录跳转登录页面
            if (localStorage._token == "" || localStorage._token == undefined) {
                this.$router.push({name: "login"});
                return false;
            }
            // 管理员登录信息
            this.getAdminInfo();
            // 获取左侧菜单
            this.getLeftMenu();
            this.getconfig();
            this.getCrumbs();
            this.getCrumbsIds();
            this.base = JSON.parse(sessionStorage.base);
            // body的css高度
            let clientHeight = document.documentElement.clientHeight;
            // 页面的高度
            this.$refs.htmlHeight.style.height = clientHeight + "px";
            // 左侧菜单的高度 = body - header
            this.$refs.leftSider.style.height = clientHeight - 60 + "px";
            // 右边主题框架高度 = body - header - 面包屑
            this.mainHeight = clientHeight - 160 + "px";
            this.$refs.main.style.height = this.mainHeight;
        },
        methods: {
            //获取个人信息
            getAdminInfo() {
                let vm = this;
                axios
                    .get("/admin/userInfo", {})
                    .then(response => {
                        let status = response.status;
                        let data = response.data;
                        if (data.code == 200) {
                            let result = data.data;
                            vm.adminData = result;
                        } else if (data.code == 4001) {
                            this.$router.push({ name: "login" });
                        } else {
                            vm.$message.info(data.message);
                        }
                    })
                    .catch(error => {
                        // vm.$Message.info("网络或服务器异常");
                    });
            },
            // 获取左侧菜单
            getLeftMenu() {
                let vm = this;
                axios
                    .get("/admin/getLeftMenu", {})
                    .then(response => {
                        let status = response.status;
                        let data = response.data;
                        if (data.code == 200) {
                            let result = data.data;
                            vm.listData = result;
                        } else {
                            vm.$message.info(data.message);
                        }
                    })
                    .catch(error => {
                        // vm.$Message.info("网络或服务器异常");
                    });
            },
            // 退出
            signOut() {
                localStorage._token = "";
                this.$router.push({ name: "login" });
            },
            //跳转页面
            clickMenu(menu_route) {
                this.$router.push({ name: menu_route });
                this.getCrumbs();
            },
            //配置信息
            getconfig() {
                let vm = this;
                axios
                    .post("/admin/public/conf", {
                        app: "base"
                    })
                    .then(response => {
                        let status = response.status;
                        let data = response.data;
                        if (data.code == 200) {
                            let result = data.data;
                            let Conf = result;
                            vm.confData = Conf;
                            sessionStorage.base = JSON.stringify(Conf);
                            // console.log(Conf)
                        } else {
                            vm.$Message.info(data.message);
                        }
                    })
                    .catch(error => {
                        // vm.$Message.info("网络或服务器异常");
                    });
            },
            //获取数据 面包屑
            getCrumbs() {
                let vm = this;
                axios
                    .post("/admin/getCrumbs", {
                        route: vm.$route.name
                    })
                    .then(response => {
                        let data = response.data;
                        if (data.code == 200) {
                            let result = data.data;
                            vm.Crumbs = result.list;
                            // console.log(result.list);
                        } else {
                            vm.$Message.info(data.message);
                        }
                    })
                    .catch(error => {
                        // vm.$Message.info("网络或服务器异常");
                    });
            },
            //获取Crumbs 面包屑
            getCrumbsIds() {
                let vm = this;
                axios
                    .post("/admin/getCrumbsIds", {
                        route: vm.$route.name
                    })
                    .then(response => {

                        let data = response.data;
                        if (data.code == 200) {
                            let result = data.data;
                            vm.activeName = result.list.crumbs_id;
                            // console.log(result.list)
                            vm.openNames = [];
                            vm.openNames = result.list.crumbs_ids;
                        } else {
                            vm.$Message.info(data.message);
                        }
                    })
                    .catch(error => {
                        // vm.$Message.info("网络或服务器异常");
                    });
            }
        }
    }
</script>